<template>
  <div>
   <van-nav-bar
  title="城市列表"
  left-arrow
  @click-left="onClickLeft"
/>
<!-- 当前城市 -->
<van-index-anchor index="当前城市" />
<van-cell :title='cityname'/><!-- 当前城市只有热门城市可以显示，要在热门城市组件里写 -->

<!-- 热门城市 -->
<city-hot></city-hot>

<!-- 所有城市列表   ：index-list搞成自定义索引,因为有的字母没有-->
<van-index-bar :index-list='cityarr'>
  <!-- 双重for循环 -->
  <!-- 遍历list里面有letter字母和data数组  -->
  <div  v-for="(item,index) in list" :key='index' >
  <van-index-anchor :index="cityarr[index]" /><!-- 用cityarr的Index -->
    <van-cell  v-for='(item,index) in item.data' :key='index' :title="item" @click='clickFn'/><!-- 遍历data数组 里面存放的是分类好的城市 -->
  </div>
</van-index-bar>
  </div>
</template>

<script>
import { getcityName } from '@/utils/storage'
import cityHot from '@/views/cityHot.vue'
import { cityList } from '@/api/user'
import { pySegSort } from '@/utils/cityClassify'

export default {
  name: 'city_page',

  data () {
    return {
      list: [],
      cityarr: [], // ABC...
      cityname: ''// 为了当前城市做准备
    }
  },
  components: {
    cityHot
  },
  async created () {
    // 获取本地数据
    this.cityname = getcityName()
    /* 所有城市请求 */
    const { body } = await cityList()
    console.log(body)
    this.list = body
    // 处理数据
    this.list = pySegSort(this.list.map(item => item.label))// letter和data
    console.log(this.list)
    this.cityarr = this.list.map(item => item.letter)// 把里面有的拿出来
    console.log(this.cityarr)
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    /* 点击事件 */
    clickFn () {
      this.$toast('该城市暂无房源')
    }
  }
}
</script>

<style>

</style>
